<template>
	<view class="form-container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-column">
				<view class="title">姓名</view>
				<input class="uni-input" name="nickname" placeholder="请输入姓名"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">性别</view>
				<radio-group name="gender" class="radio-group">
					<radio value="男" >男</radio>
					<radio value="女" >女</radio>
				</radio-group>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">爱好</view>
				<checkbox-group name="loves" class="checkbox-group">
					<checkbox value="读书">读书</checkbox>
					<checkbox value="写字">写字</checkbox>
				</checkbox-group>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">年龄</view>
				<slider  value="20" name="age" show-value min="1" max="120"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">保留选项</view>
				<view class="choose-option">
					<switch name="keepInfo"></switch>
					<text name="switch-text">保存我的信息</text>
				</view>
			</view>
			<view class="uni-btn-v">
				<button form-type="submit">Submit</button>
				<button type="default" form-type="reset">Reset</button>
			</view>
		</form>
	</view>
</template>

<script>
// 引入表单验证工具（路径需与实际文件位置一致，示例为 @/common 目录）
import graceChecker from '@/common/graceChecker.js'; 

export default {
	methods: {
		formSubmit(e) {
			const formData = e.detail.value;
			console.log('表单提交数据：', JSON.stringify(formData));

			// 验证规则（注意：checkRule 用英文逗号分隔选项）
			const rules = [
				{ name: "nickname", checkType: "string", checkRule: "1,3", errorMsg: "姓名应为1-3个字" },
				{ name: "gender", checkType: "in", checkRule: "男,女", errorMsg: "请选择性别" },
				{ name: "loves", checkType: "notnull", checkRule: "", errorMsg: "请选择爱好" },
			];

			// 调用 graceChecker 进行验证
			const isValid = graceChecker.check(formData, rules);

			if (isValid) {
				uni.showToast({ title: "验证通过！", icon: "none" });
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formData),
					showCancel: false
				});
			} else {
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		},
		formReset() {
			uni.showToast({ title: '表单已重置', icon: 'none' });
		}
	}
}
</script>

<style>

</style>
